<template>
  <div class="data-large">
    <!-- <div id="underline"></div> -->
    <div class="data-large-box"><img src="./image/bg4.png" style="width:100%;height:100%;" /></div>
    <div class="title">
      <span>{{ screen_name }}</span>
    </div>
    <div class="underline-pane">
      <div class="underline-left"></div>
      <div class="underline-right"></div>
    </div>
    <div class="current-date">当前时间: {{ nowTime }}</div>
    <div class="total-sales">
      <div class="total-box">
        <div>
          销售总额: <span class="total-color"><countTo :startVal="0" :decimals="2" :endVal="Number(total_sales)" :duration="500"></countTo></span>
        </div>
      </div>
    </div>
    <div class="detail-box">
      <orderCard class="real-order" :orderData="order" v-if="isShow" :ininValue="ininValue"></orderCard>
      <mapCard class="map-box" :province="province" v-if="isShow"></mapCard>
      <areaCard class="area-box" :areaData="province" v-if="isShow"></areaCard>
      <memberCard class="membership-box" :memberData="kickback" v-if="isShow" :ininValue="ininValue"></memberCard>
    </div>
    <div class="bottom-box">
      <leftQuarterCard class="left-quarter" :quarter="quarter" v-if="isShow"></leftQuarterCard>
      <middleQuarterCard class="middle-quarter" :quarter="quarter" v-if="isShow"></middleQuarterCard>
      <rightQuarterCard class="right-quarter" :memberAllData="member" :total_member="total_member" v-if="isShow" :ininValue="ininValue"></rightQuarterCard>
    </div>
    <div class="space-sty"></div>
  </div>
</template>

<script>
import index_controller from "./index_controller";

export default index_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.underline-pane {
  display: flex;
  justify-content: space-between;
  .underline-left {
    width: 32%;
    position: relative;
    top: -2vh;
  }
  .underline-left:after {
    content: "";
    width: 0;
    height: 2px;
    background: #56aeff;
    position: absolute;
    top: 100%;
    left: 50%;
    transition: all 0.8s;
    animation: underlineMove 3s infinite linear;
  }
  .underline-right {
    width: 32%;
    position: relative;
    top: -2vh;
  }
  .underline-right:after {
    content: "";
    width: 0;
    height: 2px;
    background: #56aeff;
    position: absolute;
    top: 100%;
    left: 50%;
    transition: all 0.8s;
    animation: underlineMove 3s infinite linear;
  }
}

@keyframes underlineMove {
  0% {
    left: 50%;
    width: 0;
  }
  100% {
    left: 0%;
    width: 100%;
  }
}

.data-large-box {
  position: absolute;
  left: 33%;
  top: 17%;
  font-weight: bold;
  // width: 26vw;
  height: 46vh;
  width: 46vh;
  color: white;
  // transform: skew(10deg, 30deg);
  animation: myfirst2 15s infinite linear;
}

// @keyframes myfirst2 {
//   from {
//     transform: rotateX(100deg) rotateZ(0);
//   }
//   to {
//     transform: rotateX(100deg) rotateZ(360deg);
//   }
// }

@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}

@media (min-height: 980px) {
  .real-order {
    height: 50vh !important;
  }

  .map-box {
    height: 50vh !important;
  }

  .area-box {
    height: 50vh !important;
  }

  .membership-box {
    height: 50vh !important;
  }
}

@media screen and (max-height: 852px) {
  .real-order {
    height: 42vh !important;
  }

  .map-box {
    height: 42vh !important;
  }

  .area-box {
    height: 42vh !important;
  }

  .membership-box {
    height: 42vh !important;
  }
}

@media screen and (max-height: 720px) {
  .real-order {
    height: 40vh !important;
  }

  .map-box {
    height: 40vh !important;
  }

  .area-box {
    height: 40vh !important;
  }

  .membership-box {
    height: 40vh !important;
  }

  .title {
    padding: 1.6% 0 1.3% 0 !important;
  }
}

// @media screen and (max-height: 720px) {
//   .data-large {
//     position: inherit !important;
//   }

//   .real-order,
//   .map-box,
//   .area-box,
//   .membership-box {
//     height: 60vh !important;
//   }

//   .bottom-box {
//     height: 40vh !important;
//   }

//   .data-large-box {
//     position: absolute;
//     left: 18%;
//     top: 50%;
//     width: 60vw;
//     height: 60vh;
//   }
  // .total-sales {
  //   margin-left: 21vw !important;
  // }

  // .title {
  //   padding: 1.6% 0 1.3% 0 !important;
  // }
// }

.data-large {
  // background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_bg.png') no-repeat #00083a;
  // background-size: 50% 52%;
  // background-position: 50% 81%;
  background: #00083a;
  width: 100%;
  height: 100%;
  position: fixed;
  line-height: 1;
  display: flex;
  flex-direction: column;

  .title {
    background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_top.png") no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    // color: #16EEFE;
    padding: 1.2% 0 1.3% 0;
    position: relative;
    top: -10px;

    span {
      font-weight: bold;
      // font-size: 26px;
      font-size: 1.5rem;
      background-image: -webkit-linear-gradient(bottom, #16eefe, #92eeff, #c5f8ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .current-date {
    color: white;
    display: flex;
    margin: 10px 30px;
    font-size: 0.88rem;
    color: #02d9fd;
  }

  .total-sales {
    font-weight: 400;
    color: white;
    padding: 1.2% 0;
    display: flex;
    margin-left: 20vw;
    position: relative;
    // width: 30vw;
    // float: right;
    // justify-content: end;

    .total-box {
      // padding: 10px 20px;
      height: 6.5vh;
      background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_sale.png") no-repeat;
      background-size: 100% 100%;
      font-size: 1rem;
      position: absolute;
      top: 10%;

      div {
        line-height: 6.5vh;
        padding: 0 20px;
        font-size: 1.5rem;
      }
    }

    .total-color {
      color: #fdea93;
      font-size: 1.25rem;
    }
  }

  .detail-box {
    display: flex;
    color: white;
    margin: 0 30px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 6vh;

    .real-order {
      // flex: 0.8;
      width: 18%;
      // width: 300px;
      // max-height: 440px;
      height: 48vh;
    }

    .map-box {
      // flex: 2;
      // width: 45%;
      width: 41%;
      height: 48vh;
      right: -7px !important;
    }

    .area-box {
      // flex: 1;
      width: 20%;
      height: 48vh;
      position: relative;
      // top: -10%;
    }

    .membership-box {
      // flex: 0.8;
      width: 18%;
      // width: 300px;
      // max-height: 440px;
      height: 48vh;
    }
  }

  .bottom-box {
    padding: 10px 10px 0 20px;
    display: flex;
    color: white;
    flex-grow: 1;
    display: flex;

    .left-quarter {
      // height: 23vh !important;
      // width: 20%;
      flex: 1;
      flex-grow: 1;
      // height: 34vh;
    }

    .middle-quarter {
      flex: 2.2;
      // width: 40%;
    }

    .right-quarter {
      flex: 1.5;
      // width: 32%;
    }
  }

  .space-sty {
    height: 3vh;
  }
}
</style>
